<link rel="stylesheet" href="__CDN__/assets/addons/shopro/libs/element/element.css">
<link rel="stylesheet" href="__CDN__/assets/addons/shopro/libs/common.css">
<style>
    #indexPage {
        background: #fff;
        border-radius: 10px 10px 0px 0px;
        padding-bottom: 30px;
    }
    .shopro-edit-text{
        margin: 0;
    }

    [v-cloak] {
        display: none
    }
</style>
<script src="__CDN__/assets/addons/shopro/libs/vue.js"></script>
<script src="__CDN__/assets/addons/shopro/libs/element/element.js"></script>
<script src="__CDN__/assets/addons/shopro/libs/moment.js"></script>
<div id="indexPage" v-cloak v-loading="isAjax">
    <div class="shopro-header-container">
        分销商等级
    </div>
    <div class="shopro-index-button-container">
        <div class="shopro-button shopro-refresh-button" @click="getindexList">
            <i class="el-icon-refresh"></i>
        </div>
        <div class="shopro-add-button" @click="operation('create',null,null)">
            <i class="el-icon-plus"></i>添加等级
        </div>
    </div>
    <div class="shopro-table-container">
        <el-table :data="indexList" style="width: 100%" stripe border :cell-class-name="tableCellClassName"
        :header-cell-class-name="tableCellClassName">
            <el-table-column prop="level" label="等级" width="120">
                <template slot-scope="scope">
                    <div>
                        等级{{scope.row.level}}&nbsp;<span v-if="scope.row.level==1">(默认等级)</span>
                    </div>
                </template>
            </el-table-column>
            <el-table-column label="等级名称" min-width="120">
                <template slot-scope="scope">
                    <div class="ellipsis-item">
                        {{scope.row.name}}
                    </div>
                </template>
            </el-table-column>
            <el-table-column label="等级徽章" min-width="120">
                <template slot-scope="scope">
                    <div class="table-image">
                        <el-image :src="Fast.api.cdnurl(scope.row.image)" fit="contain">
                            <div slot="error" class="image-slot">
                                <i class="el-icon-picture-outline"></i>
                            </div>
                        </el-image>
                    </div>
                </template>
            </el-table-column>
            <el-table-column label="一级(自购)佣金比例" min-width="160">
                <template slot-scope="scope">
                    <div class="shopro-custom-cell-center">{{scope.row.commission_rules.commission_1}}%</div>
                </template>
            </el-table-column>
            <el-table-column label="二级佣金比例" min-width="120">
                <template slot-scope="scope">
                    <div class="shopro-custom-cell-center">{{scope.row.commission_rules.commission_2}}%</div>
                </template>
            </el-table-column>
            <el-table-column label="三级佣金比例" min-width="120">
                <template slot-scope="scope">
                    <div class="shopro-custom-cell-center">{{scope.row.commission_rules.commission_3}}%</div>
                </template>
            </el-table-column>
            <el-table-column label="操作" fixed="right" min-width="120">
                <template slot-scope="scope">
                    <div>
                        <span class="shopro-edit-text" @click="operation('edit',scope.row.level)">编辑</span>
                    </div>
                </template>
            </el-table-column>
        </el-table>
    </div>
</div>